<template>
   <div class="index-content">
       <div class="head-bg">
       <div class="head-div1">
           <el-button type="danger">删除</el-button>
           <el-button type="success" @click="dialogFormVisible = true;dialogFormVisibleText='添加盲盒'">添加</el-button>
       </div>
       <div class="head-div2">
           <div class="head-div2-div1">
                <span class="span">ID</span>
                <el-input v-model="search.id" placeholder="请输入" style="min-width: 200px;" />
           </div>
           <div class="head-div2-div2">
                <span class="span">状态</span>
                 <el-select v-model="search.value" placeholder="不限"  style="min-width: 200px;">
                    <el-option
                    v-for="item in search.select"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                    >
                    </el-option>
                </el-select>
                <el-button style="margin-left: 20px; margin-right: 20px;" type="primary" :icon="Search"></el-button>
           </div>
       </div>
   </div>
   


   <div class="table-bg">
       <el-table :data="tableData" style="width: 100%" >
            <el-table-column type="selection" width="55" />
            
             <el-table-column label="ID" min-width="100">
                <template  #default="scope" >
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>

            <el-table-column label="分类" min-width="100">
                <template   #default="scope">
                    <span>{{scope.row.fl}}</span>
                </template>
            </el-table-column>
            <el-table-column label="标签" min-width="100">
                <template #default="scope">
                    <span>{{scope.row.tag}}</span>
                </template>
            </el-table-column>
            <el-table-column label="名称" min-width="200">
                <template  #default="scope">
                    <span>{{scope.row.nc}}</span>
                </template>
            </el-table-column>

            <el-table-column label="图片" min-width="100">
                <template #default="scope">
                    <el-image
                        style="width: 50px; height: 50px; "
                        :src="scope.row.img"
                        :preview-src-list="scope.row.imgArr"
                        :initial-index="0"
                        preview-teleported
                        fit="cover"
                    >
                    </el-image>
                </template>
            </el-table-column>

             <el-table-column label="盒子数量" min-width="100">
                <template  #default="scope">
                    <span>{{scope.row.number}}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作时间" min-width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </div>
            </template>
            </el-table-column>

            <el-table-column label="状态" width="100">
            <template #default="scope">
                 <el-button size="small"
                >{{ scope.row.name }}</el-button
                >
            </template>
            </el-table-column>

            <el-table-column label="操作"  min-width="280">
            <template  #default="scope">
                <el-button  type="primary" size="small">商品</el-button>
                <el-button type="warning" size="small">盒子</el-button>
                <el-button size="small" @click="dialogFormVisible=true;dialogFormVisibleText='编辑盲盒'">编辑</el-button>
                <el-button size="small" type="danger" @click="del(scope.row.name)">删除</el-button>
            </template>
            </el-table-column>

        </el-table>
   </div>
   <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[10, 20, 30]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="100"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
   </div>



    <!--  -->
    <el-dialog v-model="dialogFormVisible" :title="dialogFormVisibleText">
        <el-form :model="dialogFormVisibleForm">


            <el-form-item label="盒子封面" :label-width="formLabelWidth" >
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :limit="1"
                >
                    <el-icon><plus /></el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
            </el-form-item>

            <el-form-item label="选择商品" :label-width="formLabelWidth">
                <el-select v-model="dialogFormVisibleForm.region1" placeholder="请选择商品" style="width: 214px;">
                    <el-option label="请选择商品" value="请选择商品" disabled></el-option>
                    <el-option label="商品1" value="商品1"></el-option>
                    <el-option label="商品2" value="商品2"></el-option>
                </el-select>
                 <el-select v-model="dialogFormVisibleForm.region2" placeholder="请选择标签" style="width: 214px;">
                    <el-option label="请选择标签" value="请选择标签" disabled></el-option>
                    <el-option label="标签1" value="标签1"></el-option>
                    <el-option label="标签2" value="标签2"></el-option>
                </el-select>
                 <el-input v-model="dialogFormVisibleForm.one" placeholder="请填写权重" style="width: 214px;"></el-input>
            </el-form-item>

            <el-form-item label="选择分类" :label-width="formLabelWidth">
                <el-select v-model="dialogFormVisibleForm.region" placeholder="请选择" style="width: 214px;">
                    <el-option label="请选择" value="请选择" disabled></el-option>
                    <el-option label="苹果盲盒" value="苹果盲盒"></el-option>
                    <el-option label="口红盲盒" value="口红盲盒"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="选择标签" :label-width="formLabelWidth">
                <el-select v-model="dialogFormVisibleForm.tag" placeholder="请选择" style="width: 214px;">
                    <el-option label="请选择" value="请选择" disabled></el-option>
                    <el-option label="新人" value="新人"></el-option>
                    <el-option label="福袋" value="福袋"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="盲盒数量" :label-width="formLabelWidth" >
                <el-input v-model="dialogFormVisibleForm.number" style="width: 214px;"></el-input>
            </el-form-item>

            <el-form-item label="拆盒价格" :label-width="formLabelWidth" >
                <el-input v-model="dialogFormVisibleForm.money" style="width: 214px;"></el-input>
            </el-form-item>

            <el-form-item label="盲盒说明" :label-width="formLabelWidth">
                <el-input v-model="dialogFormVisibleForm.sm"  ></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-radio-group v-model="dialogFormVisibleForm.resource">
                    <el-radio label="上架"></el-radio>
                    <el-radio label="下架"></el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
        </template>
    </el-dialog>
    <!--  -->








</template>

<script setup>

import {ref} from 'vue'
import { Search,Timer,Plus  } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
let search = ref({
    id: '',
    value: '',
    select: [
        {
            value: '不限',
            label: '不限',
            disabled: true,
        },
        {
            value: '上架',
            label: '上架',
        },
         {
            value: '下架',
            label: '下架',
        }
    ]
})


let tableData = ref([
  {
    id: 0,
    fl: 'Nike盲盒',
    tag: '新人',
    nc: '耐克AIR男子运动鞋新款板鞋DH2521',
    sm: '碎片盒子',
    img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
    imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
    number: 10000,
    date: '2022-02-11 12:01:26',
    name: '上架',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 1,
    fl: 'Nike盲盒',
    tag: '新人',
    nc: '耐克AIR男子运动鞋新款板鞋DH2521',
    sm: '碎片盒子',
    img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
    imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
    number: 10000,
    date: '2022-02-11 12:01:26',
    name: '上架',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    fl: 'Nike盲盒',
    tag: '新人',
    nc: '耐克AIR男子运动鞋新款板鞋DH2521',
    sm: '碎片盒子',
    img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
    imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
    number: 10000,
    date: '2022-02-11 12:01:26',
    name: '上架',
    address: 'No. 189, Grove St, Los Angeles',
  },
  
  
  {
    id: 3,
    fl: 'Nike盲盒',
    tag: '新人',
    nc: '耐克AIR男子运动鞋新款板鞋DH2521',
    sm: '碎片盒子',
    img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
    imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
    number: 10000,
    date: '2022-02-11 12:01:26',
    name: '上架',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    fl: 'Nike盲盒',
    tag: '新人',
    nc: '耐克AIR男子运动鞋新款板鞋DH2521',
    sm: '碎片盒子',
    img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
    imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
    number: 10000,
    date: '2022-02-11 12:01:26',
    name: '上架',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    fl: 'Nike盲盒',
    tag: '新人',
    nc: '耐克AIR男子运动鞋新款板鞋DH2521',
    sm: '碎片盒子',
    img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
    imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
    number: 10000,
    date: '2022-02-11 12:01:26',
    name: '上架',
    address: 'No. 189, Grove St, Los Angeles',
  },
])


let dialogFormVisible = ref(false)
let dialogFormVisibleText = ref('')
let dialogFormVisibleForm = ref({})


const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (file, fileList) => {
  console.log(file, fileList)
}
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}


const del = () => {
  ElMessageBox.confirm(
    '确认删除该数据吗？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
    //   ElMessage({
    //     type: 'info',
    //     message: '删除失败',
    //   })
    })
}


</script>

<style lang="scss">


.index-content{
    padding: 0px 30px;
}

.head-bg{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
       .head-div1{
           height: 100%;
           display: flex;
           align-items: center;
       }
       .head-div2{
           display: flex;
           align-items: center;
           .head-div2-div1{
               display: flex;
               align-items: center;
               .span{
                   text-align: center;
                   min-width: 50px;
                   margin-left: 30px;
                   margin-right: 30px;
               }
           }
           .head-div2-div2{
                display: flex;
               align-items: center;
               .span{
                    text-align: center;
                    min-width: 50px;
                    margin-right: 30px;
                    margin-left: 30px;
               }
           }
       }
   }


   

   .demo-pagination-block {
       margin: 30px 0;
    }

    .el-form-item__label{
         width: 68px;
         text-align: start;
    }


</style>